import React from 'react';
import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;
const Hsbd = (props) => {
  // const [count, setCount] = React.useState({a:1})
  const [form] = Form.useForm();

  //form表单数据变动的时 调用
  const onFieldsChange = (changedFields, allFields) => {
    // this.formRef.current.setFieldsValue({
    //   username: allFields[0].value,
    //   money: allFields[1].value,
    // })
  }

  //表单验证成功后的回调
  const onFinish = (values) => {
    console.log(values, 11111)
  }

  //表单自定义验证 callback已弃用
  const validateLimit = (rule, value) => {
    if (value) {
      // callback('请选择');
      return Promise.resolve()
    } else {
      // callback();
      return Promise.reject('请选择1')
    }
  }

  //手动验证 
  const confirm = () => {
    form.validateFields().then(values => {
      console.log(values, 222)
    })
  }

  return (
    <div>
      <Form form={form} onFieldsChange={onFieldsChange} onFinish={onFinish}>
        <Form.Item label="名字" name="username" rules={[{ required: true, message: '请输入名称' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="钱" name="money" rules={[{ required: true, validator: validateLimit }]}>
          <Select>
            <Option value="rmb">人民币</Option>
            <Option value="dollar">美元</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          {/* <Button type="primary" htmlType="submit" onClick={this.confirm}> */}
          <Button type="primary" onClick={confirm}>
            Submit
          </Button>
        </Form.Item>
      </Form>

    </div>
  );
}

export default Hsbd;